/**
 * Services.js
 * 
 * 服务列表组件，用于显示洗衣服务的选项
 * 包含多种洗衣服务类型，用户可以浏览选择
 */

import { StyleSheet, Text, View, ScrollView, Pressable, Image } from 'react-native'
import React from 'react'

/**
 * Services 组件
 * 显示洗衣服务列表，用户可以水平滚动浏览不同服务
 * @returns {JSX.Element} 服务列表组件
 */
const Services = () => {
    // 服务数据数组，包含服务的ID、图片URL和名称
    const services = [
        {
            id: "0",
            image: "https://cdn-icons-png.flaticon.com/128/3003/3003984.png",
            name: "Washing",        // 洗涤服务
        },
        {
            id: "11",
            image: "https://cdn-icons-png.flaticon.com/128/2975/2975175.png",
            name: "Laundry"         // 洗衣服务
        },
        {
            id: "12",
            image: "https://cdn-icons-png.flaticon.com/128/9753/9753675.png",
            name: "Wash & Iron",    // 洗涤和熨烫服务
        },
        {
            id: "13",
            image: "https://cdn-icons-png.flaticon.com/128/995/995016.png",
            name: "Cleaning",       // 清洁服务
        }
    ];
    
    /**
     * 渲染服务列表组件
     */
    return (
        <View style={{ padding: 8 }}>
            {/* 服务列表标题 */}
            <Text style={{ fontSize: 16, fontWeight: "500" }}>服务列表</Text>
            
            {/* 水平滚动视图，显示服务选项 */}
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                {services.map((service, index) => (
                    // 每个服务项的可按压容器
                    <Pressable style={{ margin: 6, backgroundColor: 'white', padding: 15, borderRadius: 5 }} key={index}>
                        {/* 服务图标 */}
                        <Image
                            source={{ uri: service.image }}
                            style={{ width: 60, height: 60}}
                        />
                        {/* 服务名称 */}
                        <Text style={{ textAlign: "center", marginTop: 5 }}>{service.name}</Text>
                    </Pressable>
                ))}
            </ScrollView>
        </View>
    )
}

export default Services

/**
 * 样式定义
 * 使用StyleSheet.create创建组件样式
 */
const styles = StyleSheet.create({})